<%- include('../../layouts/base/header', { title: isEdit ? '编辑文档 - ' + document.title : '新建文档', hideNav: true }) %>

<div class="min-h-screen">
    <!-- 顶部工具栏 -->
    <div class="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div class="max-w-full px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- 左侧导航 -->
                <div class="flex items-center space-x-4">
                    <a href="/book/<%= book.username %>/<%= book.slug %>" class="space-x-2 text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div class="text-gray-300">|</div>
                    <h1 class="flex items-center space-x-4 text-lg font-medium text-gray-900">
                        <img src="<%= book.cover_image %>" class="w-8 h-8 border rounded-full"/>
                        <span><%= book.title %></span>
                        <% if (document) { %>
                            <div class="text-gray-300">|</div>
                            <span class="text-sm text-gray-500"><%= document.title %></span>
                        <% } %>
                    </h1>
                </div>

                <%- include('../../components/alert', { type: 'error', message: error }) %>
                <%- include('../../components/alert', { type: 'success', message: success }) %>

                <!-- 右侧操作 -->
                <div class="flex items-center space-x-4">
                    <!-- 在线用户显示区域 -->
                    <div class="flex items-center space-x-2 border-l border-gray-200 pl-4">
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-users text-gray-400 text-sm"></i>
                            <span class="text-sm text-gray-600">
                                <% if (isEdit) { %>
                                    编辑中:
                                <% } else { %>
                                    在线:
                                <% } %>
                            </span>
                        </div>
                        <div id="onlineUsers" class="flex items-center space-x-1">
                            <div class="text-gray-400 text-sm">加载中...</div>
                        </div>
                    </div>

                    <div class="flex items-center space-x-3">
                        <% if (documents && documents.length > 0) { %>
                            <!-- 保存状态 -->
                            <div id="saveStatus" class="text-sm text-gray-500 space-x-0.5">
                                <i class="fas fa-circle text-gray-400"></i>
                                <span>未修改</span>
                            </div>

                            <!-- 预览切换 -->
                            <button id="togglePreview" class="space-x-1 px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors">
                                <i class="fas fa-eye"></i>
                                <span>预览</span>
                            </button>
                        <% } %>

                        <!-- 保存按钮 -->
                        <% if (isEdit) { %>
                            <button id="saveData" class="px-4 py-2 space-x-1 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-md transition-colors">
                                <i class="fas fa-save"></i>
                                <span>保存</span>
                            </button>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 其余部分保持不变 -->
    <div class="flex h-screen" style="height: calc(100vh - 4.3rem)">
        <!-- 左侧文档列表 -->
        <div class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
            <div class="flex-shrink-0">
                <div class="flex items-center justify-between border-b border-gray-200 px-4 py-1">
                    <h2 class="text-sm font-medium text-gray-900">文档列表</h2>
                    <button id="topAddBtn" class="p-1 text-gray-400 hover:text-blue-600 transition-colors" title="新建文档">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>

            <div class="flex-1 overflow-y-auto overflow-x-auto min-h-0">
                <div class="space-y-1 min-w-max">
                    <%- include('../../components/tree', {
                    documents: documents, currentDocument: document, bookUsername: book.username, bookSlug: book.slug, enableContextMenu: true, expandAll: false, showStatusBadge: true, showIcons: false, linkPattern: '/book/writer/{username}/{bookSlug}/{docSlug}',
                    contextMenuItems: [ { action: 'add', label: '添加子文档', icon: 'fas fa-plus', className: 'text-gray-700 hover:bg-gray-100' }, { action: 'edit', label: '编辑文档', icon: 'fas fa-edit', className: 'text-gray-700 hover:bg-gray-100' }, { action: 'delete', label: '删除文档', icon: 'fas fa-trash', className: 'text-red-600 hover:bg-red-50' } ]
                    }) %>
                </div>
            </div>
        </div>

        <!-- 主编辑区域 -->
        <div class="flex-1 flex flex-col">
            <% if (isEdit) { %>
                <!-- 编辑器容器 -->
                <div class="flex h-full">
                    <!-- Markdown编辑器 -->
                    <div id="editorPane" class="w-full bg-white">
                        <textarea id="markdownEditor" placeholder="开始编写你的文档...支持 Markdown 语法"
                                  class="w-full h-full p-4 border-none outline-none resize-none font-mono text-sm leading-relaxed"><%- document.content %></textarea>
                    </div>

                    <!-- 预览面板 -->
                    <div id="previewPane" class="w-1/2 bg-white border-l border-gray-200 p-4 overflow-y-auto hidden">
                        <iframe id="markdownPreview"
                                class="w-full h-full border-none bg-white"
                                sandbox="allow-same-origin allow-scripts"
                                srcdoc="">
                        </iframe>
                    </div>
                </div>
            <% } else { %>
                <!-- 新建文档 -->
                <div class="flex-1 flex items-center justify-center bg-white">
                    <div class="text-center space-y-6">
                        <i class="fas fa-file-alt text-gray-300 text-6xl"></i>
                        <h3 class="text-lg font-medium text-gray-900">开始编写文档</h3>
                        <p class="text-gray-500 mb-6">创建文档来开始编写你的书籍</p>
                        <button id="centerAddBtn" class="space-x-2 px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors">
                            <i class="fas fa-plus"></i>
                            <span>创建文档</span>
                        </button>
                    </div>
                </div>
            <% } %>
        </div>
    </div>
</div>

<%- include('../../components/modal', { modalId: 'documentModal', content: include('../../partials/document-content') } ) %>

<!-- 全局数据变量 -->
<script>
    // 添加当前用户信息
    window.currentUser = {
        id: <%= user.id %>,
        username: '<%= user.username %>',
        avatar: '<%= user.avatar || "" %>'
    }

    window.bookData = {
        username: '<%= book.username %>',
        slug: '<%= book.slug %>',
        title: '<%= book.title %>'
    }

    <% if (document) { %>
    window.documentData = {
        slug: '<%= document.slug %>',
        title: '<%= document.title %>'
    }
    <% } else { %>
    window.documentData = {}
    <% } %>

    window.isEdit = <%= isEdit ? 'true' : 'false' %>
</script>

<script src="/socket.io/socket.io.js"></script>
<script src="/js/document-editor.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('treeAction', function (e) {
            const { action, docId, docTitle, docSlug, docStatus, hasChildren } = e.detail

            switch (action) {
                case 'add':
                    if (typeof openDocumentModal === 'function') {
                        openDocumentModal('new', { parentId: docId })
                    }
                    break

                case 'edit':
                    if (typeof openDocumentModal === 'function') {
                        openDocumentModal('edit', {
                            id: docId,
                            title: docTitle,
                            slug: docSlug
                        })
                    }
                    break

                case 'delete':
                    if (confirm('确定要删除这个文档吗？此操作不可恢复！')) {
                        deleteDocument(docSlug)
                    }
                    break
            }
        })

        function deleteDocument(docSlug) {
            const deleteForm = document.createElement('form')
            deleteForm.method = 'POST'
            deleteForm.action = `/document/${ bookData.username }/${ bookData.slug }/${ docSlug }`
            deleteForm.style.display = 'none'

            const methodInput = document.createElement('input')
            methodInput.type = 'hidden'
            methodInput.name = '_method'
            methodInput.value = 'DELETE'
            deleteForm.appendChild(methodInput)

            document.body.appendChild(deleteForm)
            deleteForm.submit()
        }
    })
</script>

<%- include('../../layouts/base/footer') %>